<html><head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
    body {
        margin: 0;
        padding: 0;
        background-image: url('login_bg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        font-family: Arial, sans-serif;
    }
    
    .container {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        box-sizing: border-box;
    }
    
    form {
        margin-top: 0; /* 移除原有的顶部边距 */
    }
    
    table {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        width: 600px;
        max-width: 900px; /* 根据规范设置最大宽度 */
        margin: 0 auto; /* 居中表格 */
    }
    
    td {
        padding: 10px 15px; /* 根据规范调整内边距 */
    }
    
    td:first-child {
        text-align: right;
        font-weight: bold;
        width: 30%; /* 根据规范设置标签列宽度 */
    }
    
    input[type="text"], input[type="password"], input[type="email"], input[type="date"] {
        width: 70%; /* 根据规范调整输入框宽度 */
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
    
    input[type="radio"] {
        margin: 0 5px;
    }
    
    input[type="submit"] {
        background-color: #FFD700;
        color: #333;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        /* 按钮居中 */
        display: block;
        margin: 0 auto;
    }
    
    input[type="submit"]:hover {
        background-color: #FFC107;
    }
    
    h1 {
        text-align: center;
        color: #333;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        font-size: 20px; /* 根据规范设置主标题字体大小 */
    }
    
    img {
        vertical-align: middle;
    }
    
    /* 添加搜索城市功能的样式 */
    .search-container {
        position: relative;
        width: 70%;
        display: inline-block;
    }
    
    .search-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
    
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ccc;
        border-top: none;
        max-height: 200px;
        overflow-y: auto;
        z-index: 100;
        display: none;
    }
    
    .search-result-item {
        padding: 8px;
        cursor: pointer;
    }
    
    .search-result-item:hover {
        background-color: #f0f0f0;
    }
    
    /* 添加邮箱验证样式 */
    input:valid {
        border-color: #28a745;
    }
    
    input:invalid {
        border-color: #dc3545;
    }
</style>
</head>
<body>
    <div class="container">
	<form action="#" method="get">
		<table border="1" width="600" align="center">
			<tbody><tr>
				<td><label for="unameId">用户名</label></td>
		        <td><input type="text" name="username" id="unameId" required></td>
			</tr>
			
			<tr>
				<td><label for="psId">密码</label></td>
		        <td><input type="password" name="password" id="psId" required></td>
			</tr>
			
			<tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email" placeholder="example@domain.com"></td>
            </tr>
            
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label>性别</label></td>
                <td><input type="radio" name="gender" value="male" id="male"> <label for="male">男</label>
                    <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label>
                </td>
            </tr>
            
            <tr>
                <td><label for="city">城市</label></td>
                <td>
                    <div class="search-container">
                        <input type="text" class="search-input" id="city" placeholder="输入城市名称搜索..." autocomplete="off">
                        <div class="search-results" id="city-results"></div>
                    </div>
                </td>
            </tr>
            
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday" max="" placeholder="请选择日期"></td>
            </tr>
            
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode" required>
                    <img src="verify_code.jpg" alt="验证码">
                </td>
            </tr>
            
             <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
		</tbody></table>
	</form>
    </div>

<script>
    // 设置出生日期最大值为今天
    document.getElementById('birthday').max = new Date().toISOString().split('T')[0];
    
    // 城市搜索功能
    const cities = ['北京', '上海', '广州', '深圳', '杭州', '南京', '苏州', '武汉', '成都', '重庆', 
                   '天津', '西安', '青岛', '大连', '厦门', '宁波', '无锡', '郑州', '长沙', '福州'];
    
    const cityInput = document.getElementById('city');
    const cityResults = document.getElementById('city-results');
    
    cityInput.addEventListener('input', function() {
        const value = this.value.trim();
        if (value === '') {
            cityResults.style.display = 'none';
            return;
        }
        
        const filteredCities = cities.filter(city => 
            city.toLowerCase().includes(value.toLowerCase())
        );
        
        if (filteredCities.length > 0) {
            cityResults.innerHTML = '';
            filteredCities.forEach(city => {
                const div = document.createElement('div');
                div.className = 'search-result-item';
                div.textContent = city;
                div.addEventListener('click', () => {
                    cityInput.value = city;
                    cityResults.style.display = 'none';
                });
                cityResults.appendChild(div);
            });
            cityResults.style.display = 'block';
        } else {
            cityResults.style.display = 'none';
        }
    });
    
    // 点击其他区域隐藏搜索结果
    document.addEventListener('click', function(e) {
        if (!cityInput.contains(e.target) && !cityResults.contains(e.target)) {
            cityResults.style.display = 'none';
        }
    });
</script>
</body>
</html>